<style scoped lang="less">
	.el-button {
		margin-left: 15px;
	}

	.el-input__wrapper {
		margin-right: 15px;
	}

	h3 {

		margin-bottom: 20px;

	}

	.el-table {
		width: 100vh;
	}

	.fomeflex {
		// margin-left: 50px;
		display: flex;
		flex-wrap: wrap;
	}

	.demonstration {
		margin-right: 12px;
	}

	.vipscore {
		margin-bottom: 20px;
		display: flex;
		justify-content: space-between;

		p {
			font-weight: 800;
			text-align: center;
			margin-bottom: 30px;
		}

		div {
			height: 100px;
			width: 250px;
		}
	}

	.common-layout {
		background: #f2f3f5;

		.el-header {
			padding: 0 !important;
			height: 10vh;
		}

		.el-main {
			height: 86vh;
			// padding: 0;
			width: 98%;
			background: #fff;
			margin: 10px auto;
		}
	}


	ul {
		// margin-top: 20px;
		margin-left: 30px;
		list-style: none;

		li {
			margin-top: 20px;
			display: flex;
			align-items: center;
		}
	}

	img {
		width: 25px;
	}

	.btns {
		width: 150px;
		float: right;
	}
	.mya{
		display: inline-block;
		color: #4b5db9;
		width: 50px;
		text-align: center;
		cursor: pointer;
	}
	.spanRight{
		margin-right: 20px;
	}
</style>
<template>
	<div class="common-layout">
		<el-container>
			<el-header>
				<Header></Header>
			</el-header>
			<el-main>
				<h3>会员佣金</h3>
				<el-row style="margin:20px 0 30px 30px;">
					<el-col :span="5">
						  <el-statistic :value="totalUserTotalMoney" title="累计佣金(元)"/>
					</el-col>
					<el-col :span="5">
						  <el-statistic :value="totalUserNotMoney" title="未提现佣金(元)"/>
					</el-col>
					<el-col :span="5">
						  <el-statistic :value="totalUserMoney" title="已提现佣金(元)"/>
					</el-col>
					<el-col :span="5">
						  <el-statistic :value="totalUserMoneyIng" title="已提现佣金(元)"/>
					</el-col>
				</el-row>
				<div class="fomeflex">
					<el-form-item label="会员信息" label-width="90">
						<el-input clearable style="width: 210px;height: 36px;" 
						v-model="searchItem.userName" size="large" placeholder="请输入会员编号/昵称/手机号" />
					</el-form-item>
					<el-form-item label="来源/用途" label-width="90">
						<el-select style="width: 210px" v-model="searchItem.source" clearable placeholder="全部">
							<el-option v-for="item in souroption" :key="item.value" :label="item.sourcename"
								:value="item.value" />
						</el-select>
					</el-form-item>
					<el-form-item label="发生时间" label-width="90">
						<el-date-picker style="width:210px" v-model="timevalue" type="datetimerange"
							:shortcuts="shortcuts" range-separator="To" start-placeholder="开始时间"
							end-placeholder="结束时间" prefix-icon="Calendar" />
					</el-form-item>
					<div class="btns">
						<el-button type="primary" @click="search">搜索</el-button>
						<el-button plain @click="reset">重置</el-button>
					</div>
				</div>
				<el-table :data="tableData" style="width: 100%" height="48vh">
					<el-table-column prop="userAccount" label="会员编号" />
					<el-table-column label="会员信息">
						<template #default="opt">
							<div style="display: flex; align-items: center;">
								<img src="../../public/头像.png" alt="" />
								{{opt.row.userName}}
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="userTel" label="手机号码" />
					<el-table-column prop="moneyChange" label="变动金额" />
					<el-table-column label="剩余金额">
						<template #default="opt">
							{{opt.row.moneyFinal}}
						</template>
					</el-table-column>
					<el-table-column prop="address" label="账户类型">
						<template #default="opt">
							{{opt.row.accountType}}
						</template>
					</el-table-column>
					<el-table-column prop="moneySourceId" label="来源/用途" />
					<el-table-column prop="createTime" label="发生时间" />
					<el-table-column label="操作" style="width: 25%;">
						<template #default="opt">
							<span class="mya" @click="detail(opt.row)">详情</span>
						</template>
					</el-table-column>
				</el-table>
				<el-pagination layout="prev,pager,next" :page-count="total" :page-size="pageSize"
					v-model:current-page="pageIndex" @current-change="changePage"></el-pagination>
				<!-- 详情对话框 -->
				<el-dialog v-model="dialogFormVisible" title="佣金变动详情" width="400">
					<el-form style="height: 400px;">
						<el-form-item>
							<ul>
								<li><span class="spanRight">会员头像</span><img src="../../public/头像.png" /></li>
								<li><span class="spanRight">会员编号</span><span>{{rowItem.userAccount}}</span></li>
								<li><span class="spanRight">会员昵称</span><span>{{rowItem.userName}}</span></li>
								<li><span class="spanRight">手机号码</span><span>{{rowItem.userTel}}</span></li>
								<li><span class="spanRight">变动余额</span><span>{{rowItem.moneyChange}}</span></li>
								<li><span class="spanRight">来源/途径</span><span>{{rowItem.moneySourceId}}</span></li>
								<li><span class="spanRight">发生时间</span><span>{{rowItem.createTime}}</span></li>
							</ul>
						</el-form-item>
					</el-form>
					<template #footer>
						<div class="dialog-footer">
							<el-button type="primary" @click="sure">
								确定
							</el-button>
						</div>
					</template>
				</el-dialog>
				
			</el-main>
		</el-container>
	</div>
</template>
<script setup>
	import Header from '@/components/Header.vue'
	import {
		ref,
		onMounted,
		reactive
	} from 'vue'
	import {
		// VipcommissionSearch,
		VipcommissionList
	} from "@/api"
	let pageIndex = ref(1);
	let pageSize = 5;
	let total = ref(0)
	const tableData = ref([])
	const sourcevalue = ref()
	const souroption = ref([
		{
		sourcename:"佣金返现",
		value:"佣金返现",
		},
		{
		sourcename:"代理返现",
		value:"代理返现",
		},
		{
		sourcename:"销售奖励",
		value:"销售奖励",
		}
	])
	let totalUserTotalMoney = ref("")
	let totalUserNotMoney = ref("") //未提现
	let totalUserMoney = ref("") //已经体现
	let totalUserMoneyIng = ref("") //提现中

	//获取会员佣金列表
	const getcommissionList = async () => {
		let res = await VipcommissionList({
			pageIndex: pageIndex.value,
			pageSize: pageSize,
			siteId: Number(sessionStorage.getItem("siteId")),
		})
		// console.log("会员佣金列表", res)
		tableData.value = res.list
		total.value = res.pageCount
		// console.log(tableData.value,total.value)
		totalUserTotalMoney.value = res.total_money
		totalUserNotMoney.value = res.not_money
		totalUserMoney.value = res.had_money
		totalUserMoneyIng.value = res.in_money
	}
	//点击详情
	const dialogFormVisible = ref(false)
	let rowItem=reactive({});
	const detail = async (row) => {
		dialogFormVisible.value = true
		Object.assign(rowItem,row)
		// console.log(rowItem)
		// let res = await VipbalanceListdel({
		// 	"moenyId":row.moneyId
		// })
		// console.log("会员余额详情",res);
	}
	const sure = async () => {
		dialogFormVisible.value = false
	}


	//点击分页器
	const changePage = (page) => {
		// console.log(page)
		pageIndex.value = page;
		search()
	}
	const timevalue = ref('')
	const shortcuts = [{
		text: 'Last week',
		value: () => {
			const end = new Date()
			const start = new Date()
			start.setDate(start.getDate() - 7)
			return [start, end]
		},
	}]

	onMounted(() => {
		getcommissionList()
	})
	// 搜索表单
	let searchItem = reactive({
		userName:"",
		startTime:"",
		endTime:"",
		source:"",
		pageSize:pageSize,
		pageIndex:pageIndex,
		siteId:Number(sessionStorage.getItem("siteId"))
	})
	const search = async() =>{
		if(timevalue.value){
			let startdata = timevalue.value[0].toLocaleString().split(" ")[0].replace(/\//g, '-')
			let startdataTime = timevalue.value[0].toLocaleString().split(" ")[1]
			let startTime = startdata + " " + startdataTime
			let enddata = timevalue.value[1].toLocaleString().split(" ")[0].replace(/\//g, '-')
			let enddataTime = timevalue.value[1].toLocaleString().split(" ")[1]
			let endtTime = enddata + " " + enddataTime
			searchItem.startTime = startTime
			searchItem.endTime = endtTime
		}
		let data = {}
		for( let key in (searchItem)){
			if(searchItem[key]){
				// console.log(searchData[key])
				data[key] = searchItem[key]
			}
		}
		let res = await VipcommissionList(data)
		tableData.value=res.list
		total.value=res.pageCount
		// console.log("搜索res",res)
	}
	
	// 重置
	const reset=()=>{
		searchItem.userName=""
		searchItem.startTime=""
		searchItem.endTime=""
		searchItem.source=""
		search()
	}
</script>